import React, { useMemo } from 'react';
import {
  DataSet,
  Form,
  SelectBox,
  Password,
  Modal,
  Button,
} from 'choerodon-ui/pro';
import {
  Content, Header, Page, Breadcrumb, TabPage, HeaderButtons, CONSTANTS,
} from '@choerodon/master';
import { siteApiConifg, siteApi } from '@choerodon/master';
import { observer } from 'mobx-react';
import { Alert } from 'choerodon-ui';

import './index.less';

const prefix = 'c7ncd-basic-feedback';

const {
  MODAL_WIDTH: {
    MIN,
  },
} = CONSTANTS;

const Index = observer(() => {
  const formDs = useMemo(() => new DataSet({
    autoQuery: true,
    paging: false,
    transport: {
      read: () => ({
        ...siteApiConifg.getFeedBack(),
        transformResponse: (res) => {
          let newRes = res;
          try {
            newRes = JSON.parse(newRes);
            return [newRes];
          } catch (e) {
            return newRes;
          }
        },
      }),
    },
    fields: [{
      name: 'enable',
      type: 'string' as any,
      label: '是否启用反馈',
      valueField: 'value',
      textField: 'name',
      required: true,
      options: new DataSet({
        data: [{
          name: '启用',
          value: 'true',
        }, {
          name: '停用',
          value: 'false',
        }],
      }),
    }, {
      name: 'token',
      dynamicProps: {
        required: ({ record }) => record.get('enable') === 'true',
      },
      type: 'string' as any,
      label: '燕千云快捷提单Token',
    }, {
      name: 'secretKey',
      type: 'string' as any,
      label: '人员信息密钥',
      dynamicProps: {
        required: ({ record }) => record.get('enable') === 'true',
      },
    }],
  }), []);

  const handleSubmit = async () => {
    const flag = await formDs.validate();
    if (flag) {
      const data = formDs?.current?.toData();
      if (data?.id) {
        await siteApi.putFeedBack(data);
        formDs.query();
      } else {
        await siteApi.postFeedBack(data);
        formDs.query();
      }
    }
  };

  const handleCancel = () => {
    formDs.query();
  };

  return (
    <TabPage>
      <Header />
      <Breadcrumb />
      <Content className={prefix}>
        <Alert
          message={(
            <p style={{ marginBottom: 0 }}>
              猪齿鱼用户反馈接入燕千云快速提单，获取配置信息请联系燕千云租户管理员。
              <a target="_blank" href="https://choerodon.com.cn/#/knowledge/share/a34b4e052fce3a88" rel="noreferrer">如何进行配置</a>
            </p>
          )}
          type="info"
          showIcon
        />
        <Form style={{ marginTop: 20 }} dataSet={formDs}>
          <SelectBox
            name="enable"
          />
          {
            formDs?.current?.get('enable') === 'true' && (
              <>
                <Password
                  name="token"
                />
                <Password
                  name="secretKey"
                />
              </>
            )
          }
        </Form>
        {
          formDs?.dirty && (
          <div>
            <Button onClick={handleSubmit} color={'primary' as any}>确定</Button>
            <Button onClick={handleCancel}>取消</Button>
          </div>
          )
        }
      </Content>
    </TabPage>
  );
});

export default Index;
